<template>
  <a-modal
    v-model="visible"
    :width="700"
    title="数据字典信息详细"
  >
    <a-row class="row-item">
      <a-col :md="4" :sm="16" class="col-label">编号：</a-col>
      <a-col :md="8" :sm="20">{{ detailInfo.id }}</a-col>
      <!--<a-col :md="4" :sm="16" class="col-label">区域编号：</a-col>-->
      <!--<a-col :md="8" :sm="20">{{ detailInfo.communityTypeCode }}</a-col>-->
    </a-row>
    <a-row class="row-item">
      <a-col :md="4" :sm="16" class="col-label">字典项编码：</a-col>
      <a-col :md="8" :sm="20">{{ detailInfo.code }}</a-col>
      <a-col :md="4" :sm="16" class="col-label">字典项名称：</a-col>
      <a-col :md="8" :sm="20">{{ detailInfo.name }}</a-col>
    </a-row>
    <a-row class="row-item">
      <a-col :md="4" :sm="16" class="col-label">类型编码：</a-col>
      <a-col :md="8" :sm="20">{{ detailInfo.typeCode }}</a-col>
      <a-col :md="4" :sm="16" class="col-label">类型名称：</a-col>
      <a-col :md="8" :sm="20">{{ detailInfo.typeName }}</a-col>
    </a-row>
    <a-row class="row-item">
      <a-col :md="4" :sm="16" class="col-label">排序：</a-col>
      <a-col :md="8" :sm="20">{{ detailInfo.order }}</a-col>
      <a-col :md="4" :sm="16" class="col-label">是否删除：</a-col>
      <a-col :md="8" :sm="20">{{ detailInfo.state === 1 ? '否' : '是' }}</a-col>
    </a-row>
    <a-row class="row-item">
      <a-col :md="4" :sm="16" class="col-label">备注：</a-col>
      <a-col>{{ detailInfo.remark }}</a-col>
    </a-row>
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  props: ['detailInfo'],
  data () {
    return {
      visible: false
    }
  },
  methods: {
    handleCancel () {
      this.$emit('update:detailInfo', false)
      this.visible = false
    }
  }
}
</script>

<style scoped>
.row-item{
  margin-bottom: 30px;
}
.col-label{
  text-align: right;
}
</style>
